<template>
	<view class="content">
		<view class="content-title yangsf-m-t-60">
			<view class="content-title-main">
				您好,
			</view>
			<view class="content-title-text">
				欢迎使用友橙信 <span style="color: #EE9B00; margin-left: 20px;" @click="toPage">密码登录</span>
			</view>
		</view>
		<view class="myForm">
			<u--form labelPosition="left" :model="myForm" :rules="rules" ref="uForm">
				<u-form-item label="" labelWidth="80" prop="tele" borderBottom ref="item1">
					<u--input placeholder="请输入手机号" clearable v-model="myForm.tele" border="none"></u--input>
				</u-form-item>
				<u-form-item label="" labelWidth="80" prop="userInfo.code" borderBottom ref="item2">
					<!-- #ifndef APP-NVUE -->
					<u-input placeholder="输入短信验证码" border="none" maxlength="5" v-model="myForm.code">
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholder="输入短信验证码" border="none" maxlength="5" v-model="myForm.code">
						<!-- #endif -->
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
								<u-button @tap="getCode" :text="tips" type="warning" size="small"></u-button>
							</template>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</u-form-item>
				<u-form-item class="myBtn">
					<u-button type="primary" text="验证码登录" @click="login"></u-button>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		appId,
		callbackUrl
	} from '@/config/config.js'

	import {
		sendCode,
		doLogin
	} from '@/config/api.js'
	export default {
		data() {
			return {
				tips: '',
				myForm: {
					tele: '',
					code: '',
					wxCode: ''
				},
				rules: {
					'tele': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad() {
			this.$store.commit('setLogout', {});
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.myForm.tele) {
					uni.$u.toast("请先填写手机号")
					return
				}

				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					sendCode(this.myForm).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						} else {
							uni.$u.toast('发送失败');
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			},
			toPage() {
				uni.$u.route('/pages/userCenter/login');
			},
			login() {
				this.$refs.uForm.validate().then(res => {
					console.log('校验通过')

					doLogin(this.myForm).then(loginRes => {
						console.log("登录请求到的数据 ==> {}", loginRes)
						console.log("登录 code ==> {}", loginRes.code)
						if (loginRes.code == 200) {
							this.$store.commit('setUserInfo', loginRes.data);
							console.log("即将跳转微信登录 ==> {}", callbackUrl);
							let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
								appId +
								'&redirect_uri=' + encodeURIComponent(callbackUrl) +
								'&response_type=code&scope=snsapi_userinfo&state=' + loginRes.data.id +
								'#wechat_redirect';
							window.location.href = url
						} else {
							uni.$u.toast(loginRes.msg)
						}
					}).catch(loginRes => {
						uni.$u.toast(loginRes.msg)
					})
				}).catch(errors => {
					console.log('校验失败')
				})

			}
		}
	}
</script>

<style scoped>
	.content {
		margin: auto;
		/* width: 80%; */
		/* border: 3px solid green; */
		padding: 20px;
		align-items: center;
		justify-items: center;
	}

	.myForm {
		margin-top: 20px;
		width: 100%;
	}

	.myBtn {
		margin-top: 30px;
	}

	.toRegist {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.content-title {
		width: 100%;
		height: 160px;
	}

	.content-title-main {
		font-size: 60rpx;
		font-weight: bold;
	}

	.content-title-text {
		margin-top: 10px;
		color: #9D9D9D;
		font-size: 36rpx;

		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>